<template>
	
	<div>
		
		<div>
			
			<el-dialog title="修改大类" :visible.sync="dialogFormVisible1" @close="cleanSort()">
			  <el-form :model="updateBigSortParam">
			    <el-form-item label="大类名称" :label-width="formLabelWidth">
			      <el-input v-model="updateBigSortParam.sortName" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="大类备注" :label-width="formLabelWidth">
			      <el-input v-model="updateBigSortParam.sortNote" autocomplete="off"></el-input>
			    </el-form-item>
				<div>
					<span>预留文件上传区</span>
					<el-upload
					  class="upload-demo"
					  action="http://localhost:80/file/upload"
					  name="file"
					  :on-success="filesucess"
					  list-type="picture"
					  ref='upload'
					  >
					  <el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</div>
				<el-row>
					<el-col>鉴定图定义</el-col>
				</el-row>
				<div v-for="(shopDefine,index) in shopDefines">
					<el-row>
						<el-col :span="8"><el-input v-model="shopDefines[index].defineName"></el-input></el-col>
						<el-col :span="8">
							<el-select v-model="shopDefines[index].defineStatus">
							  <el-option
							    v-for="item in options"
							    :key="item.value"
							    :label="item.label"
							    :value="item.value">
							  </el-option>
							</el-select>
						</el-col>
						<el-col :span="8"><el-button type="text" @click="delDefineUpdate(index)">删除</el-button></el-col>
					</el-row>  
				</div>
				<el-button type="text" @click="addDefineUpdate()">新增</el-button>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="updateBigSort()">确 定</el-button>
			  </div>
			</el-dialog>
			
		</div>
		
		
		
		<div>
			
			<el-dialog title="新增大类" :visible.sync="dialogFormVisible" @close="cleanSort()">
			  <el-form :model="addBigSortParam">
			    <el-form-item label="大类名称" :label-width="formLabelWidth">
			      <el-input v-model="addBigSortParam.sortName" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="大类备注" :label-width="formLabelWidth">
			      <el-input v-model="addBigSortParam.sortNote" autocomplete="off"></el-input>
			    </el-form-item>
				<div>
					<span>预留文件上传区</span>
					<el-upload
					  class="upload-demo"
					  action="http://localhost:80/file/upload"
					  name="file"
					  :on-success="filesucess"
					  list-type="picture"
					  ref='upload'
					  >
					  <el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</div>
				<el-row>
					<el-col>鉴定图定义</el-col>
				</el-row>
				<div v-for="(shopDefine,index) in shopDefines">
					<el-row>
						<el-col :span="8"><el-input v-model="shopDefines[index].defineName"></el-input></el-col>
						<el-col :span="8">
							<el-select v-model="shopDefines[index].defineStatus">
							  <el-option
							    v-for="item in options"
							    :key="item.value"
							    :label="item.label"
							    :value="item.value"
								>
							  </el-option>
							</el-select>
						</el-col>
						<el-col :span="8"><el-button type="text" @click="delDefine(index)">删除</el-button></el-col>
					</el-row>  
				</div>
				<el-button type="text" @click="addDefine()">新增</el-button>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="addBigSort()">确 定</el-button>
			  </div>
			</el-dialog>
			
		</div>
		
		
		
		<el-row>
			<el-col :span="13"><span style="color: #FFFFFF;">占位</span></el-col>
			<el-col :span="11"><el-tag type="info">模糊查询</el-tag></el-col>
		</el-row>
		<el-row>
		  <el-col :span="13">
			<i class="el-icon-search" style="margin-left: 5px;;">筛选查询</i>
		  </el-col>
		  <el-col :span="6">
			  <el-input v-model="getBigSortParam.sortName" placeholder="请输入商品大类名称查询"></el-input>
		  </el-col>
		  <el-col :span="1"><span style="color: #FFFFFF;">占位</span></el-col>
		  <el-col :span="4"><el-button type="info" plain @click="getByName()">点击查询</el-button></el-col>
		  
		</el-row>
		<el-divider></el-divider>
		
		
		<el-row>
		  <el-col :span="12">
			<i class="el-icon-postcard">操作</i>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="openAddBigSort()">新增大类</el-button>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="openUpdateBig()" v-if="multipleSelection.length==1">修改大类</el-button>
			  <el-button type="info" plain @click="openUpdateBig()" v-else disabled="">修改大类</el-button>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="delBigSorts()" v-if="multipleSelection.length!=0">删除大类</el-button>
			  <el-button type="info" plain @click="delBigSorts()" v-else disabled="">删除大类</el-button>
		  </el-col>
		</el-row>
		
		
		<el-table ref="multipleTable" :data="bigSorts" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
		    <el-table-column type="selection" width="55">
		    </el-table-column>
		    <el-table-column prop="sortId" label="大类号" width="160">
		    </el-table-column>
		    <el-table-column prop="sortName" label="大类名称" width="160">
		    </el-table-column>
			<el-table-column prop="sortNote" label="大类备注" width="300">
			</el-table-column>
		  </el-table>
		  
		  <div>
		  	<el-pagination background layout="prev, pager, next" :total="manytotle" :current-page="currentPage" :page-size="5" @current-change="manycode">
		  	</el-pagination>
		  </div>
		
		
	</div>
	
	
</template>

<script>
	export default {
		name: "bigSort",
		data(){
			return{
				currentPage: 1,
				options: [{
				          value: 0,
				          label: '必选'
				        },
						{
						  value: 1,
						  label: '可选'
						}],
				bigSorts: [],
				multipleSelection: [],
				getBigSortParam: {
					pageParam: {
						indexPage: 1,
						size: 5
					},
					sortName: null
				},
				addBigSortParam: {
					sortGrade: "一级",
					sortName: null,
					sortNote: null,
					sortImg: null,
					defines: []
				},
				dialogFormVisible: false,
				dialogFormVisible1: false,
				formLabelWidth: '120px',
				sortId: 0,
				shopDefines: [],
				updateBigSortParam: {
					sortId: null,
					sortName: null,
					sortNote: null,
					sortImg: null,
					defines: []
				},
				bigsortdata: [],
				manytotle: 0,
				defineId: 0
			}
		},
		methods:{
			cleanSort(){
				this.$refs.upload.clearFiles();
				this.$http.delete("/pawnbackgroundsystem/shopdefine/delTimeDefine").then(resp=>{
					
				})
			},
			filesucess(response,file){
				
				console.log(response.data)
				this.addBigSortParam.sortImg=response.data;
				this.updateBigSortParam.sortImg=response.data;
			},
			delDefineUpdate(index){
				this.defineId=(this.shopDefines[index]).defineId;
				console.log(this.shopDefines[index])
				this.shopDefines.splice(index,1);
				console.log(this.defineId)
				this.$http.delete("/pawnbackgroundsystem/shopdefine/delShopDefine?defineId="+this.defineId).then(resp=>{
					
				})
			},
			delDefine(index){
				this.shopDefines.splice(index,1);
			},
			manycode(index){
				console.log("-------------")
				console.log(index)
				console.log(this.getBigSortParam.pageParam.indexPage)
				this.getBigSortParam.pageParam.indexPage=index
				console.log(this.getBigSortParam.pageParam.indexPage)
				this.getBigsort();
			},
			getByName(){
				this.getBigSortParam.pageParam.indexPage=1
				this.getBigsort()
				// this.getBigSortParam.sortName=null;
			},
			updateBigSort(){
				this.updateBigSortParam.defines=this.shopDefines;
				this.$http.put("/pawnbackgroundsystem/sort/updateBigSort",this.updateBigSortParam).then(resp=>{
						this.dialogFormVisible1=false;
						this.sortId=0;
						this.updateBigSortParam={
													sortId: null,
													sortName: null,
													sortNote: null,
													sortImg: null,
													defines: []
												};
						this.bigsortdata=[];
						this.getBigsort();
				})
			},
			openUpdateBig(){
				this.sortId=this.multipleSelection[0]
				this.updateBigSortParam.sortId=this.sortId
				this.updateBigSortParam.sortName=this.bigsortdata[0].sortName
				this.updateBigSortParam.sortNote=this.bigsortdata[0].sortNote
				this.getShopDefine();
				this.dialogFormVisible1=true;
			},
			addBigSort(){
				this.addBigSortParam.defines=this.shopDefines;
				this.$http.post("/pawnbackgroundsystem/sort/addBigSort",this.addBigSortParam).then(resp=>{
					this.dialogFormVisible=false
					this.getBigsort();
					this.shopDefines=[];
					this.addBigSortParam.sortName=null;
					this.addBigSortParam.sortNote=null;
					this.addBigSortParam.sortImg=null;
					this.addBigSortParam.defines=[];
				})
			},
			addDefineUpdate(){
				this.shopDefines.push({
					defineId: null,
					defineName: "正面",
					defineStatus: 0,
					sortId: this.sortId,
					rawAddTime: null,
					rawUpdateTime: null
				})
				console.log(this.shopDefines)
			},
			addDefine(){
				this.shopDefines.push({
					defineId: null,
					defineName: "正面",
					defineStatus: 0,
					sortId: -1,
					rawAddTime: null,
					rawUpdateTime: null
				})
				console.log(this.shopDefines)
			},
			openAddBigSort(){
				this.getShopDefine();
				this.dialogFormVisible=true
			},
			getShopDefine(){
				this.$http.get("/pawnbackgroundsystem/shopdefine/getShopDefine?sortId="+this.sortId).then(resp=>{
					console.log(resp)
					this.shopDefines=resp.data.data
				})
			},
			delBigSorts(){
				this.getBigSortParam.pageParam.indexPage=1;
				
				this.$http.delete("/pawnbackgroundsystem/brandsort/delMany?intList="+this.multipleSelection).then(re=>{
					
				})
				
				this.$http.delete("/pawnbackgroundsystem/property/delManyProperty?intList="+this.multipleSelection).then(res=>{
					
				});
				
				this.$http.delete("/pawnbackgroundsystem/sort/delBigSort?intList="+this.multipleSelection).then(resp=>{
					this.getBigsort();
					this.multipleSelection=[];
				})
			},
			// getByName(){
			// 	this.getBigsort();
			// },
			getBigsort(){
				this.$http.post("pawnbackgroundsystem/sort/getBigSort",this.getBigSortParam).then(resp=>{
					console.log(resp)
					this.bigSorts=resp.data.data.ls;
					this.currentPage=resp.data.data.indexPage;
					this.manytotle=resp.data.data.totle;
				})
			},
			handleSelectionChange(val) {
				this.bigsortdata=val
				this.multipleSelection=[]
				for(var i=0;i<val.length;i++){
					this.multipleSelection.push(val[i].sortId)
				}
			}
		},
		created(){
			this.getBigsort();
		}
	}
</script>

<style>
</style>
